<template>
  <div id="tinymce"></div>
</template>

<script>
/* eslint-disable */
import './tinymce.min.js'
import './icons/default/icons.min.js'
import './themes/silver/theme.min.js'
import './langs/zh_CN.js'
import plugins from './plugins'
import toolbar from './toolbar'
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  name: 'tiny',
  data () {
    return {}
  },
  mounted () {
    tinymce.init({
      selector: '#tinymce',
      language: 'zh_CN',
      menubar: 'file edit insert view format table',
      menu: {
        bar1: { title: '菜单栏1', items: 'copy paste' },
        bar2: { title: '菜单栏2', items: 'cut preview' }
      },
      // 工具栏
      toolbar: toolbar,
      // 插件 preview:预览插件
      plugins: plugins,
      // 监听 tinymce 初始化完成事件
      setup: editor => {
        editor.on('init', e => {
          editor.setContent(this.value)
        })
      },
      // 监听 input 和 change 事件,实时更新 value
      init_instance_callback: editor => {
        editor.on('input', e => {
          this.$emit('input', e.target.innerHTML)
        })
        editor.on('change', e => {
          this.$emit('input', e.level.content)
        })
      },
      // 自动保存的时间间隔
      autosave_interval: '30s',
      // 自动保存的数据存储的最大时间
      autosave_retention: '30m',
      height: 600, //编辑器高度
      min_height: 400,
      importcss_append: true, //展示可以本地选择文件的按钮
      //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
      //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
      images_upload_handler: (blobInfo, success, failure) => {
        const img = 'data:image/jpeg;base64,' + blobInfo.base64()
        success(img)
      }
      //自定义文件选择器的回调内容
      // file_picker_callback: function (callback, value, meta) {
      //   if (meta.filetype === 'file') {
      //     callback('https://www.baidu.com/img/bd_logo1.png', {
      //       text: 'My text'
      //     })
      //   }
      //   if (meta.filetype === 'image') {
      //     callback('https://www.baidu.com/img/bd_logo1.png', {
      //       alt: 'My alt text'
      //     })
      //   }
      //   if (meta.filetype === 'media') {
      //     callback('movie.mp4', {
      //       source2: 'alt.ogg',
      //       poster: 'https://www.baidu.com/img/bd_logo1.png'
      //     })
      //   }
      // }
    })
  }
}
</script>

<style lang="less" scoped>
@import url('./skins/ui/oxide/skin.min.css');
</style>
